33 / Pay annual subscription by PayPal (#68)

* Refactors paypal-buttons -> paypal-product-buttons WebComponent

* Pulls out address to data file

* Defines annual subscription prices data hash

* Styles paypal-product-buttons

* Styles <address>

* Details have cursor:pointer on the summary

* Moves Jyne section to separate page

* Rewrites payment options using details components

* Reworks translation typing

* Defines MembershipType enum

* Adds translations for MembershipType enum

* Can pay annual subs by PayPal

* Styles tables better

7 files changed, 205 insertions, 26 deletions

diff --git a/src/pages/[locale]/furthsettins/lallans/[issueNumber]/index.astro b/src/pages/[locale]/furthsettins/lallans/[issueNumber]/index.astro
index 48f1947..82fabf0 100644
--- a/src/pages/[locale]/furthsettins/lallans/[issueNumber]/index.astro
+++ b/src/pages/[locale]/furthsettins/lallans/[issueNumber]/index.astro
@@ -23,4 +23,5 @@ const issue = await getLallansIssue[issueNumber]();
 
 <Page title={t(tFurthsettins, { key: 'title' })}>
   <LallansIssue issue={issue} />
+  <script src="$scripts/wc/paypal-product-buttons.ts"></script>
 </Page>
diff --git a/src/pages/[locale]/furthsettins/scotsoun/[scotsounId]/index.astro b/src/pages/[locale]/furthsettins/scotsoun/[scotsounId]/index.astro
index 90053fe..4244f70 100644
--- a/src/pages/[locale]/furthsettins/scotsoun/[scotsounId]/index.astro
+++ b/src/pages/[locale]/furthsettins/scotsoun/[scotsounId]/index.astro
@@ -24,4 +24,5 @@ const scotsoun = await getScotsoun[scotsounId]();
 
 <Page title={t(tPage, { key: 'title', scotsounId, name: scotsoun.title })}>
   <Scotsoun scotsoun={scotsoun} />
+  <script src="$scripts/wc/paypal-product-buttons.ts"></script>
 </Page>
diff --git a/src/pages/[locale]/index.astro b/src/pages/[locale]/index.astro
index e8b9cf0..d930c20 100644
--- a/src/pages/[locale]/index.astro
+++ b/src/pages/[locale]/index.astro
@@ -55,36 +55,11 @@ const mostRecentNewsItem = await getMostRecentNewsItem(locale);
     </Button>
   </section>
 
-  <section id="jyne">
-    <h2 set:html={t(tPage, { key: 'jyne' })} />
-
-    <h3 set:html={t(tPage, { key: 'why-jyne' })} />
-    <p set:html={t(tPage, { key: 'why-jyne-para-1' })} />
-    <p set:html={t(tPage, { key: 'why-jyne-para-2' })} />
-    <p set:html={t(tPage, { key: 'why-jyne-para-3' })} />
-
-    <h3 set:html={t(tPage, { key: 'hou-jyne' })} />
-    <p set:html={t(tPage, { key: 'hou-jyne-para-1' })} />
-    <p
-      set:html={t(tPage, {
-        key: 'hou-jyne-para-2',
-        membershipEmail: contactDetails.membershipSecretary.emailAddress,
-      })}
-    />
-  </section>
-
   <section id="contact">
     <h2 set:html={t(tPage, { key: 'contact' })} />
     <a href={`${locale}/mailto:${contactDetails.generalEnquiries.emailAddress}`}>
       {contactDetails.generalEnquiries.emailAddress}
     </a>
-    <address>
-      Scots Language Society<br />
-       c/o 61 Cliffburn Road<br />
-       Arbroath<br />
-       Angus<br />
-       DD11 5BA<br />
-       United Kingdom<br />
-    </address>
+    <address set:html={contactDetails.generalEnquiries.address.join('<br />')} />
   </section>
 </Page>
diff --git a/src/pages/[locale]/jyne/index.astro b/src/pages/[locale]/jyne/index.astro
new file mode 100644
index 0000000..7a1b4f6
--- /dev/null
+++ b/src/pages/[locale]/jyne/index.astro
@@ -0,0 +1,104 @@
+---
+import type Locale from '$types/Locale';
+
+import { annualSubscriptionPrice } from '$data/subscriptionPrices';
+import contactDetails from '$data/contactDetails';
+import Page from '$layouts/Page.astro';
+import localeStaticPaths from '$lib/localeStaticPaths';
+import translate from '$i18n/translate';
+import tPage from '$i18n/translations/pages/jyne';
+import tMembershipType from '$i18n/translations/enums/membershipType';
+import { allMembershipTypes } from '$enums/MembershipType';
+
+export async function getStaticPaths() {
+  return localeStaticPaths;
+}
+
+const locale = Astro.params.locale as Locale;
+const t = translate(locale);
+---
+
+<Page title={t(tPage, { key: 'title' })}>
+  <header>
+    <h1 set:html={t(tPage, { key: 'title' })} />
+  </header>
+
+  <section>
+    <h2 set:html={t(tPage, { key: 'hou-jyne' })} />
+    <p set:html={t(tPage, { key: 'hou-jyne-intro' })} />
+
+    <table>
+      <caption>{t(tPage, { key: 'subscription-price-table-caption' })}</caption>
+      <thead>
+        <tr>
+          {
+            allMembershipTypes.map((membershipType) => (
+              <th scope="col">{t(tMembershipType, { key: membershipType })}</th>
+            ))
+          }
+        </tr>
+      </thead>
+
+      <tbody>
+        <tr>
+          {
+            allMembershipTypes.map((membershipType) => (
+              <td>
+                {new Intl.NumberFormat('en-GB', {
+                  style: 'currency',
+                  currency: 'GBP',
+                  minimumFractionDigits: 2,
+                  maximumFractionDigits: 2,
+                }).format(annualSubscriptionPrice[membershipType])}
+              </td>
+            ))
+          }
+        </tr>
+      </tbody>
+    </table>
+
+    <ul class="payment-methods-list">
+      <li>
+        <details>
+          <summary set:html={t(tPage, { key: 'hou-pey-by-paypal-title' })} />
+          <ul>
+            <li><a href={`/${locale}/jyne/paypal/individual-uk`}>Individual (UK)</a></li>
+            <li><a href={`/${locale}/jyne/paypal/individual-non-uk`}>Individual (non-UK)</a></li>
+            <li><a href={`/${locale}/jyne/paypal/institution-uk`}>Institutional (UK)</a></li>
+          </ul>
+        </details>
+      </li>
+
+      <li>
+        <details>
+          <summary set:html={t(tPage, { key: 'hou-pey-by-bank-transfer-title' })} />
+          <p
+            set:html={t(tPage, {
+              key: 'hou-pey-by-bank-transfer-para',
+              emailAddress: contactDetails.membershipSecretary.emailAddress,
+            })}
+          />
+        </details>
+      </li>
+
+      <li>
+        <details>
+          <summary set:html={t(tPage, { key: 'hou-pey-by-cheque-title' })} />
+          <p
+            set:html={t(tPage, {
+              key: 'hou-pey-by-cheque-para',
+              address: contactDetails.membershipSecretary.address,
+            })}
+          />
+        </details>
+      </li>
+    </ul>
+  </section>
+
+  <section>
+    <h2 set:html={t(tPage, { key: 'why-jyne' })} />
+    <p set:html={t(tPage, { key: 'why-jyne-para-1' })} />
+    <p set:html={t(tPage, { key: 'why-jyne-para-2' })} />
+    <p set:html={t(tPage, { key: 'why-jyne-para-3' })} />
+  </section>
+</Page>
diff --git a/src/pages/[locale]/jyne/paypal/[membershipType]/index.astro b/src/pages/[locale]/jyne/paypal/[membershipType]/index.astro
new file mode 100644
index 0000000..0934854
--- /dev/null
+++ b/src/pages/[locale]/jyne/paypal/[membershipType]/index.astro
@@ -0,0 +1,41 @@
+---
+import type Locale from '$types/Locale';
+import {
+  type MembershipTypeSnakeCase,
+  allMembershipTypesSnakeCase,
+  snakeCaseToMembershipType,
+} from '$enums/MembershipType';
+import { annualSubscriptionPrice } from '$data/subscriptionPrices';
+import Page from '$layouts/Page.astro';
+import PaypalProductButtons from '$components/PaypalProductButtons.astro';
+import localeStaticPaths from '$lib/localeStaticPaths';
+import translate from '$i18n/translate';
+import tJyne from '$i18n/translations/pages/jyne';
+
+export async function getStaticPaths() {
+  return allMembershipTypesSnakeCase.flatMap((membershipType) =>
+    localeStaticPaths.map((p) => ({ ...p, params: { ...p.params, membershipType } }))
+  );
+}
+
+const locale = Astro.params.locale as Locale;
+const t = translate(locale);
+
+const membershipType = Astro.params.membershipType as MembershipTypeSnakeCase;
+---
+
+<Page title={t(tJyne, { key: `membership-type-${membershipType}` })}>
+  <section>
+    <h1>{t(tJyne, { key: `membership-type-${membershipType}` })}</h1>
+
+    <p set:html={t(tJyne, { key: `membership-type-${membershipType}-para` })} />
+
+    <PaypalProductButtons
+      successPageUrl={`/${locale}/jyne/paypal/${membershipType}/success`}
+      productDescription={t(tJyne, { key: `membership-type-${membershipType}` })}
+      shortDescription="SLA 1y subscription"
+      totalPrice={annualSubscriptionPrice[snakeCaseToMembershipType(membershipType)]}
+    />
+    <script src="$scripts/wc/paypal-product-buttons"></script>
+  </section>
+</Page>
diff --git a/src/pages/[locale]/jyne/paypal/[membershipType]/success.astro b/src/pages/[locale]/jyne/paypal/[membershipType]/success.astro
new file mode 100644
index 0000000..569e294
--- /dev/null
+++ b/src/pages/[locale]/jyne/paypal/[membershipType]/success.astro
@@ -0,0 +1,30 @@
+---
+import type Locale from '$types/Locale';
+import { type MembershipTypeSnakeCase } from '$enums/MembershipType';
+
+import Page from '$layouts/Page.astro';
+import { allMembershipTypesSnakeCase, snakeCaseToMembershipType } from '$enums/MembershipType';
+import localeStaticPaths from '$lib/localeStaticPaths';
+import translate from '$i18n/translate';
+import tJyne from '$i18n/translations/pages/jyne';
+
+export async function getStaticPaths() {
+  return allMembershipTypesSnakeCase.flatMap((membershipType) =>
+    localeStaticPaths.map((p) => ({ ...p, params: { ...p.params, membershipType } }))
+  );
+}
+
+const locale = Astro.params.locale as Locale;
+const t = translate(locale);
+
+const membershipTypeSnakeCase = Astro.params.membershipType as MembershipTypeSnakeCase;
+const membershipType = snakeCaseToMembershipType(membershipTypeSnakeCase);
+---
+
+<Page title={t(tJyne, { key: 'success' })}>
+  <section>
+    <h1>{t(tJyne, { key: 'success' })}</h1>
+
+    <p set:html={t(tJyne, { key: 'success-para', membershipType })} />
+  </section>
+</Page>
diff --git a/src/pages/[locale]/jyne/paypal/index.astro b/src/pages/[locale]/jyne/paypal/index.astro
new file mode 100644
index 0000000..55905d1
--- /dev/null
+++ b/src/pages/[locale]/jyne/paypal/index.astro
@@ -0,0 +1,27 @@
+---
+import type Locale from '$types/Locale';
+
+import Page from '$layouts/Page.astro';
+import localeStaticPaths from '$lib/localeStaticPaths';
+import translate from '$i18n/translate';
+import tJyne from '$i18n/translations/pages/jyne';
+
+export async function getStaticPaths() {
+  return localeStaticPaths;
+}
+
+const locale = Astro.params.locale as Locale;
+const t = translate(locale);
+---
+
+<Page title={t(tJyne, { key: 'hou-pey-by-paypal-title' })}>
+  <section>
+    <h1 set:html={t(tJyne, { key: 'hou-pey-by-paypal-title' })} />
+    <p set:html={t(tJyne, { key: 'hou-pey-by-paypal-para' })} />
+    <ul>
+      <li><a href={`/${locale}/jyne/paypal/individual-uk`}>Individual (UK)</a></li>
+      <li><a href={`/${locale}/jyne/paypal/individual-non-uk`}>Individual (non-UK)</a></li>
+      <li><a href={`/${locale}/jyne/paypal/institution-uk`}>Institutional (UK)</a></li>
+    </ul>
+  </section>
+</Page>